import React, {Component, Fragment} from 'react';
import {inject, observer} from 'mobx-react';
import {toJS} from "mobx";
import {
    WeaLocaleProvider,
    WeaTableEditable,
    WeaBrowser,
    WeaSelect,
    WeaCheckbox,
} from "ecCom";
import {WeaTableNew} from "comsMobx";
import {Button} from "antd";
import NoRightComponent from '../NoRightComponent.js';
import AddWorkflowMouldSetting from './AddWorkflowMouldSetting';
import * as IconConstant from '../../constant/IconConstant.js';
import LanguageConstant from '../../constant/LanguageConstant';
import '../../style/mouldSetting.less';

const {getLabel} = WeaLocaleProvider;
const {WeaTable} = WeaTableNew;

@inject("workflowSettingStore")
@observer
class ActionSetting extends Component {

    componentDidMount() {
        const {workflowSettingStore} = this.props;
        const {getWorkflowActionSettingDatas, initActionSetting} = workflowSettingStore;
        initActionSetting();
        getWorkflowActionSettingDatas();
    }

    render() {
        return (
            <div className="action-setting-component">
                {this.renderActionSettingTable()}
            </div>
        );
    }


    renderActionSettingTable = () => {
        const {workflowSettingStore} = this.props;
        const {
            actionSettings, actionSettingSelectOptions, onActionSettingChange, onActionSettingRowAdd, affirmDeleteActionSettingRow
        } = workflowSettingStore;
        const actionSettingsDatas = toJS(actionSettings);
        const columns = this.getTableColums();
        return (
            <WeaTableEditable
                rowKey="id"
                buttonsType='inline'
                columns={this.getTableColums()}
                datas={actionSettingsDatas}
                initialDatas={actionSettingsDatas}
                willAdd={onActionSettingRowAdd}
                willDelete={affirmDeleteActionSettingRow}
                onChange={data => {
                    onActionSettingChange(data);
                }}
                showCopy={false}
            />
        );
    }


    getTableColums = () => {
        const {workflowSettingStore} = this.props;
        const {actionSettingSelectOptions, onActionSettingChangeField} = workflowSettingStore;
        const executeTypeOptions = toJS(actionSettingSelectOptions.executeTypeOptions);
        const executeActionOptions = toJS(actionSettingSelectOptions.executeActionOptions);
        const actionSettingBrowserAttr = toJS(workflowSettingStore.actionSettingBrowserAttr);
        const {executePoint_afternode, executePoint_beforenode, executePoint_nodeexit} = actionSettingBrowserAttr;
        const columns = [{
            title: getLabel(LanguageConstant.PERFORM_ACTION, "执行动作"),
            dataIndex: "executeAction",
            width: "20%",
            com: [
                {
                    type: "CUSTOM",
                    key: "action",
                    render: (text, record, index, onEdit) => {
                        let {action} = record;
                        if (action == undefined) {
                            action = "";
                        }
                        return (
                            <WeaSelect
                                style={{width: "100%"}}
                                options={executeActionOptions}
                                viewAttr={3}
                                value={"" + action}
                                onChange={(value, showname) => {
                                    onEdit({
                                        type: 'CUSTOM',
                                        record: {
                                            ...record,
                                            action: value,
                                        },
                                        index,
                                    })
                                }}
                            />
                        );
                    }
                },
            ]
        }, {
            title: getLabel(LanguageConstant.EXECUTION_MODE_OR_TRIGGER_TIME, "执行方式/触发时间"),
            dataIndex: "executeType",
            width: "25%",
            com: [
                {
                    type: "CUSTOM",
                    key: "executeType",
                    render: (text, record, index, onEdit) => {
                        let {executeType} = record;
                        if (executeType == undefined) {
                            executeType = 1;
                        }
                        return (
                            <WeaSelect
                                style={{width: "100%"}}
                                options={executeTypeOptions}
                                viewAttr={3}
                                value={"" + executeType}
                                onChange={(value, showname) => {
                                    onEdit({
                                        type: 'CUSTOM',
                                        record: {
                                            ...record,
                                            executeType: value,
                                            executePoint: "",
                                            executePointName: "",
                                        },
                                        index,
                                    })
                                }}
                            />
                        );
                    }
                },
            ]
        }, {
            title: getLabel(LanguageConstant.NODE_OR_EXIT, "节点/出口"),
            dataIndex: "executePoint",
            width: "25%",
            com: [
                {
                    type: "CUSTOM",
                    key: "executePoint",
                    render: (text, record, index, onEdit) => {
                        const {id, executePoint, executeType, executePointName} = record;
                        let browserbean = undefined;
                        if (executeType == 1 && executePoint_afternode) {
                            browserbean = executePoint_afternode;
                        } else if (executeType == 2 && executePoint_beforenode) {
                            browserbean = executePoint_beforenode;
                        } else if (executeType == 3 && executePoint_nodeexit) {
                            browserbean = executePoint_nodeexit;
                        }
                        const replaceDatas = (executePoint !== undefined) ? [{
                            id: executePoint,
                            name: executePointName
                        }] : [];
                        return browserbean == undefined ? (<div></div>) : (
                            <WeaBrowser
                                type={"workflowNode"}
                                {...browserbean}
                                replaceNotCtrl={false}
                                viewAttr={3}
                                rules={null}
                                mr0
                                value={executePoint}
                                valueSpan={executePointName}
                                replaceDatas={replaceDatas}
                                onChange={(value, valuespan) => {
                                    onEdit({
                                        type: 'CUSTOM',
                                        record: {
                                            ...record,
                                            executePoint: value,
                                            executePointName: valuespan,
                                        },
                                        index,
                                    })
                                }}
                            />
                        );
                    }
                },
            ]
        }, {
            title: getLabel(LanguageConstant.REJECT_SHOULD_TRIGGER, "退回时是否触发"),
            dataIndex: "rejectTrigger",
            width: "10%",
            com: [{
                type: 'CUSTOM',
                key: 'rejectTrigger',
                render: (text, record, index, onEdit) => {
                    const {executeType, rejectTrigger} = record;
                    if (executeType == 3) {
                        return (
                            <div style={{width: "100%", textAlign: "center"}}>
                                <WeaCheckbox
                                    style={{display: 'inline'}}
                                    disabled={true}
                                />
                            </div>
                        )
                    } else {
                        return (
                            <div style={{width: "100%", textAlign: "center"}}>
                                <WeaCheckbox
                                    style={{display: 'inline'}}
                                    value={Number.parseInt(rejectTrigger)}
                                    onChange={(value) => {
                                        onEdit({
                                            type: 'CUSTOM',
                                            record: {
                                                ...record,
                                                rejectTrigger: value
                                            },
                                            index,
                                        })
                                    }
                                    }
                                />
                            </div>
                        )
                    }
                }
            }]
        }, {
            title: getLabel(LanguageConstant.ISENABLE, "是否启用"),
            dataIndex: "enable",
            width: "10%",
            com: [{
                type: 'CUSTOM',
                key: 'enable',
                render: (text, record, index, onEdit) => {
                    const {executeType, enable} = record;
                    return (
                        <div style={{width: "100%", textAlign: "center"}}>
                            <WeaCheckbox
                                display="switch"
                                style={{display: 'inline'}}
                                value={Number.parseInt(enable)}
                                onChange={(value) => {
                                    onEdit({
                                        type: 'CUSTOM',
                                        record: {
                                            ...record,
                                            enable: value
                                        },
                                        index,
                                    })
                                }
                                }
                            />
                        </div>
                    );
                }
            }]
        }];
        return columns;
    }

}

export default ActionSetting;